<template>
    <div class="videoBox">
        <div class="boxVideo" v-if="videoData.play === 1">
            <video :id="videoId" :src="videoData.content" controls objectFit="fill" :custom-cache="false" @play="playVideoModule" @error="errorVideoModule" @waiting="waitingVideoModule" @click="playVideoModule"></video>
        </div>
        <div class="boxImage" v-else>
            <form @submit.stop.prevent="playVideoModule($event)" report-submit>
              <button formType="submit" class="form-btn">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture%402x.png" mode="aspectFill">
                <div class="videoBtn">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
                </div>
              </button>
            </form>  
        </div>
    </div>
</template>

<script>
import {saveStudentFormId} from '@/config/api'
import {showMessager} from '@/config/wUtils'
export default {
    components: {},
    props: ['videoData', 'videoId'],
    data() {
        return {
            // 视屏 对象
            videoCtx: null,
            // 
            videoCache: false
        }
    },
    watch: {
        videoData: {
            handler:function(val){
                // console.log(val,"深度监听")
                this.$nextTick(() => {
                    if (val.play === 1) {
                        this.videoCtx.play()
                        // 全屏
                        // this.videoCtx.requestFullScreen()
                    } else {
                        if (this.videoCtx != null) {
                            this.videoCtx.pause()
                        }
                    }
                })
            },
            deep:true
        },
    },
   
    mounted() {
        let self = this;
        // 初始化 视频组件
        self.initVideoModule();
        // console.log('初始化 视频组件', self.videoData)
    },
    methods: {
        // 初始化 视频组件
        initVideoModule () {
            let self = this;
            if (self.videoCtx == null) {
                self.videoCtx = wx.createVideoContext(self.videoId)
                // console.log(self.videoCtx, '............初始化 视频组件');
            }
        },
        // 播放 视频组件
        async playVideoModule (e) {
            let self = this;
            // 用户信息数据
            const userData = wx.getStorageSync('userInfo')
            // // 保存用户点击的formid
            // const formState = await saveStudentFormId(userData.openId, e.target.formId)
            // console.log(formState, '.....formState')
            // 通知父组件，用户点击了我
            self.$emit("videoMeans", self.videoData);
        },
        errorVideoModule(){
            let self = this;
            console.log('.......errorVideoModule.')
            showMessager('视屏播放失败，请重新加载')
        },
        // 缓存 视频组件
        waitingVideoModule() {
            let self = this;
            console.log('缓存 视频组件')
        }
    }
};
</script>

<style lang="less" scoped>
.videoBox{
    width: 100%;
    height: 100%;
    form {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        .form-btn {
            width: 100%;
            height: 100%;
            border:none;
            text-align:left;
            padding:0;
            margin:0;
            background-color: transparent;
            &::after {
                border: none;
            }
        }
    }
    .boxImage{
        width: 100%;
        height: 100%;
        // background: #999;
        position: relative;
        img{
            width: 100%;
            height: 100%;
        }
        .videoBtn{
            position:absolute;
            width: 120rpx;
            height: 120rpx;
            line-height: 120rpx;
            top: 50%;
            left: 50%;
            margin-left: -60rpx;
            margin-top: -60rpx;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .boxVideo{
        width: 100%;
        height: 100%;
        video{
            width: 100%;
            height: 100%;
        }
    }
    
}
</style>
